
<!doctype html>
<html>
  <head>
    <title>YUI Browser History Utility - Simple Navigation Bar Example</title>
    <link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/2.7.0/build/reset-fonts-grids/reset-fonts-grids.css"/>
    <link rel="stylesheet" type="text/css" href="assets/yui-bhm-navbar-demo.css"/>
  </head>
  <body>
    <!-- Required markup. -->
    <iframe id="yui-history-iframe" src="assets/blank.html"></iframe>
    <input id="yui-history-field" type="hidden">

    <noscript>
This example requires client-side scripting enabled.
    </noscript>

    <script type="text/javascript" src="../../build/yui/yui-min.js"></script>
    <script type="text/javascript">

YUI({base:"../../build/", timeout: 10000}).use('io', 'history', function(Y) {

    var html, elem, bookmarkedSection, querySection, initSection, navbar;

    if (location.protocol.substr(0, 4) === 'file') {
        document.write('This example cannot be run locally. You must copy it to a web server and access it using HTTP or HTTPS.');
        return;
    }

    html = [];

    html.push('<div id="hd">');
    html.push('  <img src="assets/yui.gif" alt="YUI Logo" id="logo"/>');
    html.push('  <div id="nav">');
    html.push('    <ul>');
    html.push('      <li class="first"><a href="?section=home">Home</a></li>');
    html.push('      <li><a href="?section=overview">Overview</a></li>');
    html.push('      <li><a href="?section=products">Products</a></li>');
    html.push('      <li><a href="?section=aboutus">About Us</a></li>');
    html.push('      <li><a href="?section=contactus">Contact Us</a></li>');
    html.push('      <li class="last"><a href="?section=news">News</a></li>');
    html.push('    </ul>');
    html.push('  </div>');
    html.push('</div>');
    html.push('<div id="bd"></div>');
    html.push('<div id="ft">YUI Browser History Manager - Simple Navigation Bar Example</div>');

    elem = document.createElement('div');
    elem.id = 'doc';
    elem.className = 'yui-d1';
    elem.innerHTML = html.join('');
    document.body.appendChild(elem);

    // This function does an XHR call to load and display the specified section.
    function loadSection(section) {

        var url = 'assets/' + section + '.html',
            cfg = {
                on: {
                    success: function (id, o, args) {
                        Y.get('#bd').set('innerHTML', o.responseText);
                    },

                    failure: function (id, o, args) {
                        // Fallback...
                        var dst = location.href,
                            s = 'section=' + section,
                            r = /(\?|&)section=[^&]*/;

                        if (dst.match(r)) {
                            dst = dst.replace(r, '$1' + s);
                        } else {
                            if (dst.match(/\?.+/)) {
                                dst += '&';
                            } else if (!dst.match(/\?$/)) {
                                dst += '?';
                            }
                            dst += s;
                        }

                        location.href = dst;
                    }
                }
            };

        Y.io(url, cfg);
    }

    function initializeNavigationBar() {
        Y.on('click', function (evt) {
            var el = evt.target;
            while (el.get('id') !== 'nav') {
                if (el.get('nodeName').toUpperCase() === 'A') {
                    evt.preventDefault();
                    section = Y.History.getQueryStringParameter('section', el.get('href')) || 'home';
                    if (!Y.History.navigate('navbar', section)) {
                        // Fallback...
                        loadSection(section);
                    }
                    break;
                } else {
                    el = el.get('parentNode');
                }
            }
        }, '#nav');

        currentSection = Y.History.getCurrentState('navbar');
        loadSection(currentSection);
    }

    // The initial section will be chosen in the following order:
    //
    // URL fragment identifier (it will be there if the user previously
    // bookmarked the application in a specific state)
    //
    //         or
    //
    // 'section' URL parameter (it will be there if the user accessed
    // the site from a search engine result, or did not have scripting
    // enabled when the application was bookmarked in a specific state)
    //
    //         or
    //
    // 'home' (default)

    bookmarkedSection = Y.History.getBookmarkedState('navbar');
    querySection = Y.History.getQueryStringParameter('section');
    initSection = bookmarkedSection || querySection || 'home';

    // Register the 'navbar' module and subscribe to the 'history:moduleStateChange' event.
    Y.History.register('navbar', initSection).subscribe('history:moduleStateChange', loadSection);

    // Hook to the browser history utility 'history:ready' event to initialize the application.
    Y.History.subscribe('history:ready', initializeNavigationBar);

    // Initialize the browser history utility.
    if (!Y.History.initialize('#yui-history-field', '#yui-history-iframe')) {
        // Fallback...
        loadSection(initSection);
    }
});
    </script>
  </body>
</html>